<script setup lang="ts">
import { ref, watch } from "vue";
// import Delete from "@iconify-icons/ep/delete";
import { getJmxName } from "@/api/file";
import { ElMessage } from "element-plus";

defineOptions({
  name: "AddDialog"
});

const props = defineProps({
  modelValue: {
    type: Boolean,
    require: true,
    default: false
  },
  projectName: {
    type: String,
    require: true
  },
});

const jmxList = ref([]);
const dialogVisible = ref(props.modelValue); //显示弹窗
const form = ref({
  jmx: []
});
const emits = defineEmits(["update:modelValue", "submit"]);

watch(
  () => props.modelValue,
  value => {
    if (value) {
      form.value.jmx = []
      getJmxList();
    }
    dialogVisible.value = value;
  }
);

// 获取jmx列表
const getJmxList = async () => {
  try {
    const res = await getJmxName({ projectName: props.projectName });
    if (res.success) {
      const arr = [];
      res.data.forEach(item => {
        arr.push({ value: item.split(".")[0] });
      });
      jmxList.value = arr;
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    ElMessage.error(error);
  }
};

const close = () => {
  dialogVisible.value = false;
  emits("update:modelValue", false);
};

const submit = () => {
  emits("submit", form.value.jmx);
  close();
};
</script>

<template>
  <el-dialog v-model="dialogVisible" title="新增" width="30%" @close="close">
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-form-item label="场景名">
        <el-select v-model="form.jmx" multiple collapse-tags collapse-tags-tooltip placeholder="Select" filterable
          clearable style="width: 100%" no-data-text="无可添加的测试场景">
          <el-option v-for="item in jmxList" :key="item.value" :label="item.value" :value="item.value" />
        </el-select>
        <!-- <div style="max-height: 50vh;" class="overflow-auto w-full">
          <el-checkbox-group v-model="form.jmx" class="flex flex-col">
            <el-checkbox v-for="item in jmxList" :key="item.value" :label="item.value" :value="item.value" />
          </el-checkbox-group>
        </div> -->
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit"> 添加 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
